import React, {useState, useEffect} from 'react'
import {ShowLoading} from '@/components'
import {timer} from '@/utils'
import pubsub from 'pubsub-js'
import {history} from 'umi'

export default function (props) {
  const handleClick = (id) => {
    pubsub.publish('reply', id)
  }

  return (
    <div className='comment'>
      <h1 className='comment-title'>评论（点击回复）</h1>
      <div className='comment-lists'>
        {props?.lists?.map(item => (
          <div key={item.id}>
            <div className='comment-lists_item' onClick={() => {
              handleClick(item.id)
            }} key={item?.id}>
              <img onClick={() => {
                history.push({pathname: '/user/userDetail', query: {id: item.uid}})
              }} src={item?.user?.userInfo.avatar || require('@/assets/user.png')} className='avatar' alt='user'/>
              <div className='right'>
                <div className='right-top'>
                  <p>{item?.user?.nickName}</p>
                  <p>{timer(item?.createdAt)}</p>
                </div>
                <div className='right-bottom'>
                  {item?.content}
                </div>
              </div>
            </div>
            {item?.ToReply?.length ? <div className='replyList'>
              {item?.ToReply.map(reply => (
                <div className='reply' key={reply.id}>
                  <span className='name' onClick={() => {
                    history.push({pathname: '/user/userDetail', query: {id: item.uid}})
                  }}>{reply?.user?.nickName}</span>回复了:<span
                  className='content'>{reply?.content}</span>
                </div>
              ))}
            </div> : ''}
          </div>
        ))}
        <ShowLoading showLoading={props?.showLoading}/>
      </div>
    </div>
  )
}
